<!--
 * @Author: Meow
 * @Date: 2019-10-17 14:39:10
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-21 10:22:41
 * @Description: 版本管理页
 -->
<template>
  <div id="Version">
    <section class="section-top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">业务流程管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{tableConfig.busiProceName}}-版本管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button size="mini" class="back-button" @click="back">返回</el-button>
    </section>
    <section class="section-table">
      <el-scrollbar :native="false" tag="section" class="el-scroll">
        <el-table :data="tableData" :header-cell-style="tableStyle" size="mini" border v-loading="loading">
          <el-table-column prop="version" label="版本号" align="center"></el-table-column>
          <el-table-column prop="describe" label="描述" align="center"></el-table-column>
          <el-table-column prop="verisonTime" label="生成时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="toDetail(scope.row.versionId)">查看详情</el-button>
              <el-button size="mini" type="primary" @click="stopUse(scope.row.versionId)" v-if="scope.row.status != 0">
                删除
              </el-button>
              <el-button size="mini" type="primary" @click="startUse(scope.row.versionId)" v-if="scope.row.status != 0">
                启用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </section>
    <section class="section-pagination">
      <!-- <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-size="tableConfig.pageSize"
        :total="tableConfig.total" :page-count="10" :page-sizes="[5, 10, 20, 40]" :current-page="tableConfig.pageNum"
        @current-change="changePage" @size-change="sizeChange" background>
      </el-pagination> -->
    </section>
  </div>
</template>
<script>
import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "Version",
  data() {
    return {
      // 是否显示加载中
      loading: false,
      // 表格头部样式
      tableStyle: {
        color: "#606266",
        background: "#eef1f6"
      },
      // 表格数据
      tableData: [],
      // 分页配置
      tableConfig: {
        pageNum: 1, // 页码
        pageSize: 5, // 条数
        total: 0, // 总数
        busiProceId: "", // 流程id
        busiProceName: "" // 流程名
      }
    };
  },
  created() {
    let busiProceId = this.$route.query.busiProceId;
    let busiProceName = this.$route.query.busiProceName;
    this.tableConfig.busiProceId = busiProceId;
    this.tableConfig.busiProceName = busiProceName;
    console.log("busiProceId", busiProceId);
    console.log("busiProceName", busiProceName);
    // 查询版本列表
    this.GetTableData(busiProceId);
  },
  methods: {
    // 获取版本数据
    GetTableData(busiProceId) {
      processManagementApi
        .queryBusiProceVersion({ busiProceId: busiProceId })
        .then(res => {
          console.log(" 版本列表", res.data.data);
          this.tableData = res.data.data;
        });
    },
    // 删除流程版本
    stopUse(versionId) {
      this.loading = true;
      console.log("versionId", versionId);
      processManagementApi
        .delVersionByVersionId({ versionId: versionId })
        .then(res => {
          console.log(" 删除版本", res.data);
          if (res.data.code == 200) {
            this.loading = false;
            this.$message.success(res.data.message);
            this.GetTableData(this.tableConfig.busiProceId);
          } else {
            this.loading = false;
            this.$message.error(res.data.message);
          }
        });
    },
    // 启用流程版本
    startUse(versionId) {
      this.loading = true;
      console.log("versionId", versionId);
      processManagementApi
        .restartVersion({ versionId: versionId })
        .then(res => {
          console.log("启用版本", res.data);
          if (res.data.code == 200) {
            this.loading = false;
            this.$message.success(res.data.message);
            this.GetTableData(this.tableConfig.busiProceId);
          } else {
            this.loading = false;
            this.$message.error(res.data.message);
          }
        });
    },
    // 点击[返回]
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../ProcessManagement.less");
</style>